<template>
  <div>
    <div class="min-container">
      <section class="stepBar">
        <el-steps :active="2" align-center>
          <el-step title="填写订单" />
          <el-step title="订单支付" />
          <el-step title="待审核" />
        </el-steps>
      </section>
      <section class="stepCon">
        <div class="title">
          <div class="hand">
            <span
              >订单状态：<i>{{ getExamineState(order.orderStatus) }}</i></span
            >
            <span
              >订单编号:<i>{{ order.sn || "" }}</i></span
            >
            <span
              >下单时间:<i>{{ order.paymentTime || "" }}</i></span
            >
          </div>
          <div class="main" v-if="order.orderStatus === 'IN_PROGRESS'">
            <img
              src="@/assets/img/client/cloudMarketplace/components/examine.png"
              style="width: 128px; height: 128px"
            />
            <p>正在审核</p>
            <p>您的申请正在审核中，请耐心等待！</p>
          </div>
          <div class="main" v-if="order.orderStatus === 'FAIL'">
            <img
              src="@/assets/img/client/cloudMarketplace/components/fail.png"
              style="width: 128px; height: 128px"
            />
            <p>审核未通过</p>
            <p>原因：{{ order.remark }}</p>
          </div>
          <div class="main" v-if="order.orderStatus === 'SUCCESS'">
            <img
              src="@/assets/img/client/cloudMarketplace/components/success.png"
              style="width: 128px; height: 128px"
            />
            <p>审核通过</p>
          </div>
          <el-button class="btn" type="primary" @click="goHome">返回</el-button>
        </div>
      </section>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import { getOrderState } from "@/api/control/order";
const router = useRouter();
const route = useRoute();
const orderSn = ref<any>(""); // 订单编号
const order = ref<any>({}); // 订单信息
const stateList = ref<any>([
  { value: "IN_PROGRESS", label: "待审核" },
  { value: "FAIL", label: "审核未拒绝" },
  { value: "SUCCESS", label: "审核通过" },
]);

onMounted(() => {
  orderSn.value = route.query.sn;
  getOrder();
});

const getOrder = () => {
  getOrderState(orderSn.value).then((res: any) => {
    order.value = res.data;
  });
};

// 获取审核状态名称
const getExamineState = (val: string) => {
  let row = stateList.value.find((i) => i.value == val);
  return row ? row.label : "";
};

// 返回
const goHome = () => {
  router.push("/control/order/myShoppingCart");
};
</script>
<style lang="less" scoped>
.stepBar {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 117px;
  border: 2px solid #ffffff;
  background: #ffffff;
  box-shadow: -5px 5px 20px 0px #e3e8f080;
  margin: 20px 0;
}
.stepCon {
  width: 100%;
  height: auto;
  padding: 0 30px;
  border: 2px solid #ffffff;
  background: #ffffff;
  margin-bottom: 50px;
  box-shadow: -5px 5px 20px 0px #e3e8f080;
  .title {
    width: 100%;
    min-height: 626px;
    position: relative;
    display: flex;
    flex-direction: column;
    .hand {
      font-size: 18px;
      width: 100%;
      height: 50px;
      display: flex;
      align-items: center;
      letter-spacing: 0.1em;
      span {
        margin-right: 50px;
        color: #909090;
        i {
          color: #313131;
          font-weight: 600;
        }
      }
    }
    .main {
      width: 100%;
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      p {
        margin-top: 20px;
      }
      p:nth-of-type(1) {
        font-size: 24px;
        color: #313131;
        font-weight: 600;
      }
      p:nth-of-type(2) {
        font-size: 16px;
        color: #909090;
      }
    }
    .btn {
      width: 160px;
      height: 40px;
      position: absolute;
      right: 20px;
      bottom: 30px;
      border: none;
    }
  }
}
</style>
